<template>
  <div class="playlist">
    <div class="box" style="background: rgba(0,0,0,0.3)">
      <img :src="topList.coverImgUrl" alt="" class="img">
      <img :src="topList.coverImgUrl" alt="" class="img1">
      <div class="xx">精选歌单</div>
      <div class="text">
        <h4>{{topList.name}}</h4>
        <div class="p">
          <p>{{topList.description}}</p>
        </div>
      </div>
    </div>
    <!-- tab 被选中时触发 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
    v-for="t in tabs" :key="t.name"
    :label="t.data" 
    :name="t.name"
    ></el-tab-pane>
    </el-tabs>
    <div class="tab_content">
      <div class="item" v-for="l in list" :key="l.id" @click="goDtail(l.id)">
        <div class="img_wrap">
          <div class="num_wrap">
            播放量：
            <span class="num">{{l.playCount}}</span>
          </div>
          <img :src="l.coverImgUrl" alt="">
          <span></span>
        </div>
        <div class="p">
          <p class="name">{{l.name}}</p>
        </div>
      </div>
    </div>
    <el-pagination
    @current-change="handlePage"
    background
    layout="prev, pager, next"
    :current-page="page"
    :page-size="10"
    :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'RecommendPage',
  data(){
    return{
      // 总条数
      total: 0,
      // 页码
      page: 1,
      // 顶部推荐对象
      topList: {},
      // 歌单列表
      list: [],
      tabs:[
        {data: '全部',label: '全部',name: '全部'},
        {data: '欧美',label: '欧美',name: '欧美'},
        {data: '华语',label: '华语',name: '华语'},
        {data: '流行',label: '流行',name: '流行'},
        {data: '说唱',label: '说唱',name: '说唱'},
        {data: '摇滚',label: '摇滚',name: '摇滚'},
        {data: '民谣',label: '民谣',name: '民谣'},
        {data: '电子',label: '电子',name: '电子'},
        {data: '轻音乐',label: '轻音乐',name: '轻音乐'},
        {data: '影视原声',label: '影视原声',name: '影视原声'},
        {data: 'ACG',label: 'ACG',name: 'ACG'},
        {data: '怀旧',label: '怀旧',name: '怀旧'},
        {data: '治愈',label: '治愈',name: '治愈'},
        {data: '旅行',label: '旅行',name: '旅行'}
      ],
      activeName: '全部'
    }
  },
  methods: {
    handleClick(){
      console.log(this.activeName)
       // 顶部推荐
      this.$axios({
        url: '/top/playlist/highquality',
        method: 'get',
        params:{
          limit: 1,
          cat: this.activeName
        }
      }).then(res=>{
        // console.log(res)
        this.topList = res.data.playlists[0]
      })
      // 歌单列表
      this.$axios({
        url: '/top/playlist/',
        method: 'get',
        params:{
          limit: 10,
          offset: (this.page-1)*10,
          cat: this.activeName
        }
      }).then(res=>{
        // console.log(res)
        this.list = res.data.playlists
        this.total = res.data.total
      })
      // 选其他分类是格式化页数
      this.page = 1
    },
    handlePage(val){
      // console.log(val)
      // 获取当前页码
      this.page = val
      // 重新获取数据
      // 歌单列表
      this.$axios({
        url: '/top/playlist/',
        method: 'get',
        params:{
          limit: 10,
          // 起始值 （页码-1）*每页条数
          offset: (this.page-1)*10,
          cat: this.activeName
        }
      }).then(res=>{
        // console.log(res)
        this.list = res.data.playlists
        this.total = res.data.total
      })
    },
    goDtail(id){
      this.$router.push({
        name: 'playlist',
        query: { q: id }
      })
    }
  },
  created(){
    // 顶部推荐
    this.$axios({
      url: '/top/playlist/highquality',
      method: 'get',
      params:{
        limit: 1,
        cat: this.activeName
      }
    }).then(res=>{
      // console.log(res)
      this.topList = res.data.playlists[0]
    })
    // 歌单列表
    this.$axios({
      url: '/top/playlist',
      method: 'get',
      params:{
        limit: 10,
        offset: (this.page-1)*10,
        cat: this.activeName
      }
    }).then(res=>{
      // console.log(res)
      this.list = res.data.playlists
      this.total = res.data.total
    })
  }
}
</script>

<style lang="less" scoped>
.playlist{
  .box{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    .text{
      padding: 0 30px;
      margin-left: 50px;
      width: 100%;
      height: 100%;
      display: block;
      color: white;
      h4{
        padding-top: 40px;
      }
      .p{
        width: 100%;
        height: 118px;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 作为弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 设置伸缩盒子的子元素排列方式--从上到下垂直排列 */
        -webkit-box-orient: vertical;
        /* 显示的行 */
        -webkit-line-clamp: 6;
        p{
          font-size: 14px;
        }
      }
    }
    .img{
      display: block;
      width: 150px;
      height: 150px;
      margin: 30px;
    }
    .img1{
      position:absolute;
        left:0px;
        top:0px;
        z-index:-1;
      width:100%; 
      height:100%; 
      filter: blur(1px);
    }
    .xx{
      text-align: center;
      width: 15%;
      height: 12%;
      position: absolute;
      top: 10px;
      left: 37%;
      border-radius: 12px;
      border: 2px solid orange;
      color: orange;
    }
  }
  .tab_content{
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    .item{
      width: 15%;
      margin: 20px 10px;
      height: 40%;
      cursor: pointer;
      img{
        width: 100%;
      }
      .num_wrap{
        height: 30px;
        font-size: 12px;
      }
      .p{
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        p{
          display: inline;
          font-size: 14px;
        }
      }
    }
  }
  .el-pagination{
    margin: 0 auto 60px 30%;

  }
}
</style>